@import "mixins";

:host {
  display: grid;
  background-color: var(--color-titlebar-background);
  padding: 2px;

  height: 1.5em;
  grid-area: titlebar;
  grid-template-columns: 1fr 1fr 1fr;

  > div {
    -webkit-app-region: drag;
  }

  .title {
    font-weight: 300;

    display: inline-flex;

    color: var(--color-titlebar-title);

    align-items: center;
    justify-content: center;
  }

  .buttons {
    display: inline-flex;

    justify-content: flex-end;

    > div {
      display: inline-flex;

      width: 2.5em;

      -webkit-app-region: no-drag;
      justify-content: center;

      > svg {
        height: 100%;
        width: 24px;
      }

      &.minimize {
        @include titlebarButton(titlebar-minimize);
      }

      &.maximize {
        @include titlebarButton(titlebar-maximize);
      }

      &.close {
        @include titlebarButton(titlebar-close);
      }
    }
  }
}
